import VideoGenerator from "@/components/VideoGenerator";
import { useTheme } from "@/hooks/useTheme";
import { motion } from "framer-motion";

export default function Home() {
  const { isDark } = useTheme();

  // 动画变体
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2
      }
    }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6
      }
    }
  };

  return (
    <div className={`min-h-screen ${isDark ? 'bg-slate-900 text-white' : 'bg-slate-50 text-slate-900'} transition-colors duration-300`}>
      {/* 背景装饰 */}
      <div className={`fixed inset-0 -z-10 opacity-20 ${isDark ? 'bg-gradient-dark-ai' : 'bg-gradient-ai'}`}></div>
      
      {/* 主内容区 */}
      <div className="container mx-auto max-w-6xl">
        <motion.div 
          className="flex flex-col md:flex-row items-center justify-between gap-8 md:gap-16 py-12 md:py-20"
          initial="hidden"
          animate="visible"
          variants={containerVariants}
        >
          {/* 左侧文字介绍 */}
          <motion.div 
            className="w-full md:w-1/2 text-center md:text-left"
            variants={itemVariants}
          >
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
              AI 视频生成平台
            </h1>
            <p className="text-xl md:text-2xl mb-8 opacity-90">
              基于腾讯HunyuanVideo模型，只需输入文本或上传参考图，即可生成专业级4K视频，开启您的创意之旅。
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
              <a href="/dashboard" className="px-8 py-3 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                浏览作品
              </a>
              <a href="#generator" className="px-8 py-3 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/20 text-white font-medium transition-all duration-300">
                立即创作
              </a>
            </div>
            
            {/* 特点展示 */}
            <motion.div 
              className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6"
              variants={containerVariants}
            >
              <motion.div 
                className="flex items-start gap-3"
                variants={itemVariants}
              >
                <div className={`p-2 rounded-full ${isDark ? 'bg-indigo-900/50' : 'bg-indigo-100'}`}>
                  <i className="fa-solid fa-film text-indigo-500 text-xl"></i>
                </div>
                <div>
                  <h3 className="font-semibold text-lg">4K超清输出</h3>
                  <p className="opacity-80">高达4K分辨率，24fps流畅帧率</p>
                </div>
              </motion.div>
              <motion.div 
                className="flex items-start gap-3"
                variants={itemVariants}
              >
                <div className={`p-2 rounded-full ${isDark ? 'bg-purple-900/50' : 'bg-purple-100'}`}>
                  <i className="fa-solid fa-bolt text-purple-500 text-xl"></i>
                </div>
                <div>
                  <h3 className="font-semibold text-lg">快速渲染</h3>
                  <p className="opacity-80">FP8量化推理，多卡并行加速</p>
                </div>
              </motion.div>
              <motion.div 
                className="flex items-start gap-3"
                variants={itemVariants}
              >
                <div className={`p-2 rounded-full ${isDark ? 'bg-pink-900/50' : 'bg-pink-100'}`}>
                  <i className="fa-solid fa-magic text-pink-500 text-xl"></i>
                </div>
                <div>
                  <h3 className="font-semibold text-lg">电影级运镜</h3>
                  <p className="opacity-80">360度环绕、子弹时间等专业效果</p>
                </div>
              </motion.div>
              <motion.div 
                className="flex items-start gap-3"
                variants={itemVariants}
              >
                <div className={`p-2 rounded-full ${isDark ? 'bg-blue-900/50' : 'bg-blue-100'}`}>
                  <i className="fa-solid fa-cloud-arrow-up text-blue-500 text-xl"></i>
                </div>
                <div>
                  <h3 className="font-semibold text-lg">云端存储</h3>
                  <p className="opacity-80">腾讯云COS对象存储，安全可靠</p>
                </div>
              </motion.div>
            </motion.div>
          </motion.div>
          
          {/* 右侧视频生成器 */}
          <motion.div 
            id="generator" 
            className="w-full md:w-1/2"
            variants={itemVariants}
          >
            <VideoGenerator />
          </motion.div>
        </motion.div>
      </div>
    </div>
  );
}